{extend name="/public/base"}
{block name="title"}{/block}
{block name="css"}
<style>
    .clearfix li {position:relative;}
</style>
{/block}
{block name="main"}
{:widget('Pub/header')}
<!--banner轮播-->
<div class="swiper-container banner">
    <div class="swiper-wrapper">
        {volist name="banner" id="vo"}
        <div class="swiper-slide">
            <a {if ($vo.url != '')} href="{$vo.url}" target="_blank" {else/} href="javascript:;"{/if}  title="{$vo.title}">
                <img src="{$vo.img}">
            </a>
        </div>
        {/volist}
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next banner-next swiper-button-white"></div>
    <div class="swiper-button-prev banner-prev swiper-button-white"></div>
</div>
<div class="main">
    <div class="in-product">
        <div class="wow slideInRight">
            <h3 class="title">
                产品中心
                <div class="en-color">Product Center</div>
                <div class="line-box">
                    <hr class="ev-line ">
                </div>
                <div class="pro-tip">如果没有搜索到您需要的，请与我们联系客制化的解决方案</div>
            </h3>
        </div>
        <div class="list">
            <ul class="clearfix">
                <li>
                    <a href="">
                        <div class="img"><img src="/uploads/images/20210407/5cf3049b4de7fefd7840049d398f0c5e.jpg"></div>
                        <p>液态铝电解电容器</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="img"><img src="/uploads/images/20210407/73741fcece15a12beb0c7cfbe436b369.jpg"></div>
                        <p>固态、固液混合铝电解电容器</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="img"><img src="/uploads/images/20210407/9082be52c6dd4852ba1dc9b0a1aa202b.jpg"></div>
                        <p>叠层固态铝电解电容器</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="img"><img src="/uploads/images/20210407/850f09ecdc8accbbffde34ecac2a9fd6.jpg"></div>
                        <p>多层陶瓷片式电容器</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="img"><img src="/uploads/images/20210407/4f07e2d634e9f95a297dc70fd0f65c81.jpg"></div>
                        <p>超级电容器</p>
                    </a>
                </li>
            </ul>

        </div>
    </div>
</div>
<div class="field-back">
    <div class="main">
        <div class="wow slideInLeft">
            <h3 class="title" style="color: #FFFFFF">
                应用中心
                <div class="en-color">Application</div>
                <div class="line-box">
                    <hr class="ev-line ">
                </div>
                <div class="tip">电容应用，有困难找永铭</div>
            </h3>
        </div>
        <div class="field" style="padding-bottom: 0px;">
            <div id="certify">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        {volist name="apply" id="vo"}
                        <div class="swiper-slide">
                            <img src="{$vo.indexImg}"/>
                            <div class="s-btn-box">
                                <a href="{$vo.url}">
                                    <div class="s-btn">
                                        {$vo.title}
                                    </div>
                                    <div class="s-btn-more">MORE+</div>
                                </a>
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
</div>
<div class="main">
    <div class="news">
        <div class="wow slideInRight">
            <h3 class="title">
                新闻中心
                <div class="en-color">News Center</div>
            </h3>
        </div>
        <div class="layui-row">
            {volist name="news" id="vo"}
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 wow zoomIn" >
                <a class="n-box" href="/index/newsDetails?id={$vo.id}">
                    <div class="img"><img src="{$vo.thumbnail}"></div>
                    <div class="content-box">
                        <div class="n-title">{$vo.title}</div>
                        <div class="n-content">{$vo.description}</div>
                    </div>
                </a>
            </div>
            {/volist}
        </div>
        <div class="more-btn">
            查看更多
        </div>
    </div>
</div>

{:widget('Pub/footer')}

{/block}
{block name="js"}
<script type="text/javascript">
    //学员
    var _index5 = 0;
    var swiper = new Swiper('.banner', {
// effect : 'fade',
        loop: true,
        speed: 1500,
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.banner-next',
            prevEl: '.banner-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        breakpoints: {
//当宽度小于等于320
            920: {
                speed: 600,
            },
        }
    })
    $("#four_flash .but_right img").click(function () {
        _index5++;
        var len = $(".flashBg ul.mobile li").length;
        if (_index5 + 5 > len) {
            $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile")());
        }
        $("#four_flash .flashBg ul.mobile").stop().animate({left: -_index5 * 326}, 1000);
    });

    $("#four_flash .but_left img").click(function () {
        if (_index5 == 0) {
            $("ul.mobile").prepend($("ul.mobile")());
            $("ul.mobile").css("left", "-1380px");
            _index5 = 6
        }
        _index5--;
        $("#four_flash .flashBg ul.mobile").stop().animate({left: -_index5 * 326}, 1000);
    });

    // swiper
    certifySwiper = new Swiper('#certify .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 5,
        autoplay: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        on: {
            progress: function (progress) {
                for (i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;
                    modify = 1;
                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                    }
                    translate = slideProgress * modify * 80 + 'px';
                    scale = 1 - Math.abs(slideProgress) / 5;
                    zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) > 3) {
                        slide.css('opacity', 0);
                    }
                }
            },
            setTransition: function (transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }
            }
        }
    })
    new WOW().init();
</script>
{/block}

